<template>
  <div class="hello">
    <div class="txt">
      <h3>欢迎您，admin</h3>
      <p>为您带来今天的疫情信息</p>
    </div>
    <div ref="mapbox" style="width:650px;height:450px;margin:0 auto;position: fixed;left: 50%;">
    </div>
    <!-- 初始化echarts需要有个宽高的盒子 -->
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js'
import jsonp from 'jsonp'
const option = {
  title: {
    // 标题内容
    text: '中国疫情地图(数据来源新浪,仅供参考)',
    link: 'https://baidu.com',
    subtext: '截至10月20日18时31分现有确诊',
    sublink: 'https://baidu.com',
    left: "center"
  },
  series: [{
    name: '确诊人数',
    type: 'map',
    // 告诉echarts渲染一个地图
    map: 'china',
    // 告诉echarts渲染中国地图
    label: {
      // 设置地区汉字
      show: true,
      color: '#333',
      fontSize: 10
    },
    itemStyle: {
      // 地图区域样式
      areaColor: '#eee'
    },
    // 鼠标滚轮效果
    zoom: 1,
    // 地图放大缩小
    emphasis: {
      // 鼠标经过地图和字体样式
      label: {
        color: '#fff',
        fontSize: 12
      },
      itemStyle: {
        areaColor: '#ccc'
      }
    },
    data: []
    // 展示后台给的数据，必须格式（name:xxx;value:xxx）
  }],
  visualMap: [{
    // 区域显示颜色
    type: 'piecewise',
    show: true,
    // splitNumber: 4
    pieces: [
      {min: 10000},
      {min: 1000, max: 9999},
      {min: 100, max: 999},
      {min: 10, max: 99},
      {min: 1, max: 9},
      {max: 0}
    ],
    inRange: {
      // 区域图标样式
      symbol: 'rect',
      color: ['#CCCCCC', '#FFFF00', '#FFBF00', '#FF8000', '#FF4000', '#FF0000']
    }
  }],
  tooltip: {
    // 鼠标放上去显示内容
    trigger: 'item'
  },
}

export default {
  name: 'HelloWorld',
  data() {
    return {
      a: 213
    }
  },
  async created() {
  },
  mounted () {
    this.getData()
    this.mycharts = echarts.init(this.$refs.mapbox)
    // 初始化echarts
    this.mycharts.setOption(option)
  },
  methods: {
    getData () {
      jsonp('http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', {}, (err, data) => {
        if (!err) {
          // console.log(data)
          let list = data.data.list.map(item => ({name: item.name, value: item.value}))
          option.series[0].data = list
          this.mycharts.setOption(option)
          // echarts初始化的前提是dom渲染完成
        }
      })
    },
    returnChinaFn() {
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>